<template>
  <view class="container">
    <!-- 顶部导航栏 -->
<!--    <view class="nav-bar">
      <view class="left">
        <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
      </view>
      <view class="title">个人信息</view>
      <view class="right"></view>
    </view> -->
	
	<!-- 顶部卡片 -->
	<view class="welcome-card">
	  <view class="welcome-text">
	    <text class="greeting">您好!</text>
	    <text class="subtitle">欢迎查看卒中风险评估报告</text>
	  </view>
	  <image class="welcome-image" src="/static/assessment-icon.png" mode="aspectFit"></image>
	</view>

    <!-- 内容区域 -->
		
    <view class="content">
      <!-- 血压 -->
	  <!-- <text class="note">血压</text> -->
      <view class="info-item" @click="openEditPopup({
		  type: 'input',
		  title: '收缩压（高压）',
		  placeholder: '请输入收缩压',
		  value: userIndicator.sbp,
		  field: 'sbp'
		})">
        <text class="label">收缩压（高压）</text>
        <view class="value">
          <text>{{ userIndicator.sbp || '请输入' }}</text>
          <u-icon name="arrow-right" size="28" color="#999"></u-icon>
        </view>
      </view>
	  
	  <view class="info-item" @click="openEditPopup({
	  		  type: 'input',
	  		  title: '舒张压（低压）',
	  		  placeholder: '请输入舒张压',
	  		  value: userIndicator.dbp,
	  		  field: 'dbp'
	  		})">
	    <text class="label">舒张压（低压）</text>
	    <view class="value">
	      <text>{{ userIndicator.dbp || '请输入' }}</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 血糖 -->
	  <view class="info-item" @click="openEditPopup({
	  		  type: 'input',
	  		  title: '血糖（空腹）',
	  		  placeholder: '请输入血糖',
	  		  value: userIndicator.bloodSugar,
	  		  field: 'bloodSugar'
	  		})">
	    <text class="label">血糖 mmol/L</text>
	    <view class="value">
	      <text>{{ userIndicator.bloodSugar || '请输入' }} mmol/L</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <text class="note">血脂四项（总胆固醇、低密度脂蛋白胆固醇、高密度脂蛋白胆固醇、甘油三酯）</text>
	  
	  <!-- 总胆固醇 -->
	  <view class="info-item" @click="openEditSelectPopup({ 
		  title: '总胆固醇', 
		  placeholder: '请输入总胆固醇', 
		  value: userIndicator.tc, 
		  field: 'tc' })">
	    <text class="label">总胆固醇</text>
	    <view class="value">
	      <text>{{ userIndicator.tc || '请输入' }} mmol/L</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 低密度脂蛋白胆固醇 -->
	  <view class="info-item" @click="openEditSelectPopup({ 
		  title: '低密度脂蛋白胆固醇', 
		  placeholder: '请输入低密度脂蛋白胆固醇', 
		  value: userIndicator.ldlC, 
		  field: 'ldlC' })">
	    <text class="label">低密度脂蛋白胆固醇</text>
	    <view class="value">
	      <text>{{ userIndicator.ldlC || '请输入' }} mmol/L</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 高密度脂蛋白胆固醇 -->
	  <view class="info-item" @click="openEditSelectPopup({ 
		  title: '高密度脂蛋白胆固醇', 
		  placeholder: '请输入高密度脂蛋白胆固醇', 
		  value: userIndicator.hdlC, 
		  field: 'hdlC' })">
	    <text class="label">高密度脂蛋白胆固醇</text>
	    <view class="value">
	      <text>{{ userIndicator.hdlC || '请输入' }} mmol/L</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 甘油三酯 -->
	  <view class="info-item" @click="openEditSelectPopup({
	  		  type: 'input',
	  		  title: '甘油三酯',
	  		  placeholder: '请输入甘油三酯',
	  		  value: userIndicator.tg,
	  		  field: 'tg'
	  		})">
	    <text class="label">甘油三酯</text>
	    <view class="value">
	      <text>{{ userIndicator.tg || '请输入' }} mmol/L</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 身高cm -->
	  <view class="info-item" @click="openEditPopup({
	  		  type: 'input',
	  		  title: '身高(厘米)',
	  		  placeholder: '身高',
	  		  value: userIndicator.height,
	  		  field: 'height'
	  		})">
	    <text class="label">身高</text>
	    <view class="value">
	      <text>{{ userIndicator.height || '请输入' }} cm</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 体重kg -->
	  <view class="info-item" @click="openEditPopup({
	  		  type: 'input',
	  		  title: '体重(千克)',
	  		  placeholder: '体重',
	  		  value: userIndicator.weight,
	  		  field: 'weight'
	  		})">
	    <text class="label">体重</text>
	    <view class="value">
	      <text>{{ userIndicator.weight || '请输入' }} kg</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- BMI -->
	  <div class="note">保存后会根据您的身高体重自动计算出身体质量指数BMI</div>
	  <view class="info-item">
	    <text class="label">身体质量指数BMI</text>
	    <view class="value">
	      <text>{{ userIndicator.bmi || '待生成' }} </text>
		  <text v-if="level">（{{ level }}）</text>
	    </view>
	  </view>
	  
	  <!-- 腰围cm -->
	  <text class="reminder">腰围测量技巧：早晨空腹时，用软尺绕肚脐一周（不要吸气缩肚子）</text>
	  <view class="info-item" @click="openEditPopup({
	  		  type: 'input',
	  		  title: '腰围(厘米)',
	  		  placeholder: '腰围',
	  		  value: userIndicator.waist,
	  		  field: 'waist'
	  		})">
	    <text class="label">腰围</text>
	    <view class="value">
	      <text>{{ userIndicator.waist || '请输入' }} cm</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 用药 -->
	  
	  <!-- 锻炼 -->
	  <view class="info-item" @click="openEditPopup({
	  		  type: 'input',
	  		  title: '锻炼时长（分钟/周）',
	  		  placeholder: '锻炼时长',
	  		  value: userIndicator.exerciseDuration,
	  		  field: 'exerciseDuration'
	  		})">
	    <text class="label">锻炼时长</text>
	    <view class="value">
	      <text>{{ userIndicator.exerciseDuration || '请输入' }} 分钟/周</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 入睡时间点 -->
	  <view class="info-item">
		  <view class="label">
			  提醒入睡时间点
		  </view>
		  <view class="value">
			  <picker mode="time" @change="onTimeChange" >
				  <text>{{userIndicator.exerciseDuration || '请输入'}}</text>
				   
			  </picker>
			  <u-icon name="arrow-right" size="28" color="#999"></u-icon>
		  </view>
		  
<!-- 		  <view class="value">
			  <picker mode="time" @change="onTimeChange" >
				  <text>{{userIndicator.exerciseDuration || '请输入'}}</text>
				   <u-icon name="arrow-right" size="28" color="#999"></u-icon>
			  </picker>
		  </view> -->
	  </view>
	  
	  <!-- 睡眠时间 -->
	  <view class="info-item" @click="goTo">
	    <text class="label">睡眠时间段</text>
	    <view class="value">
	      <text>{{ userIndicator.exerciseDuration || '请输入' }}</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 吸烟 -->
	  <view class="info-item" @click="openEditPopup({
	  		  type: 'input',
	  		  title: '吸烟（支/周）',
	  		  placeholder: '每周吸烟支数',
	  		  value: userIndicator.smoke,
	  		  field: 'smoke'
	  		})">
	    <text class="label">吸烟支数</text>
	    <view class="value">
	      <text>{{ (userIndicator.smoke >= 0) ? userIndicator.smoke : '请输入' }} 支/周</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 饮酒 -->
	  <view class="info-item" @click="openEditPopup({
	  		  type: 'input',
	  		  title: '饮酒（克/周）',
	  		  placeholder: '每周饮酒克数',
	  		  value: userIndicator.drink,
	  		  field: 'drink'
	  		})">
	    <text class="label">饮酒克数</text>
	    <view class="value">
	      <text>{{ (userIndicator.drink >= 0) ? userIndicator.drink : '请输入' }} 克/周</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>
	  
	  <!-- 蔬菜水果 -->
	  <view class="info-item" @click="openEditPopup({
	  		  type: 'input',
	  		  title: '蔬菜水果摄入（种/天）',
	  		  placeholder: '每天蔬果摄入种数',
	  		  value: userIndicator.vegFruit,
	  		  field: 'vegFruit'
	  		})">
	    <text class="label">蔬菜水果摄入</text>
	    <view class="value">
	      <text>{{ userIndicator.vegFruit || '请输入' }} 种/天</text>
	      <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	    </view>
	  </view>

	<!-- 通用弹窗 -->
	<uni-popup ref="editPopup" type="dialog">
	  <view class="custom-modal">
		<view class="modal-title">{{ popupTitle }}</view>

		<!-- 文本输入模式 -->
		<view v-if="popupType === 'input'">
		  <input class="modal-input" type="number" v-model="tempInput" :placeholder="popupPlaceholder" />
		</view>

		<!-- 多选模式 -->
		<view v-if="popupType === 'checkbox'" class="checkbox-list">
		  <checkbox-group @change="onCheckboxGroupChange">
		    <label v-for="(item, index) in popupOptions" :key="index" class="checkbox-item">
		      <checkbox :value="item" :checked="checkedItems.includes(item)" />
		      <text>{{ item }}</text>
		    </label>
		  </checkbox-group>
		</view>
		
		<!-- 血脂四项 -->
		<!-- 输入 + 单位选择模式 -->
		<view v-if="popupType === 'select-input'">
		  <input class="modal-input" type="number" v-model="tempInput" :placeholder="popupPlaceholder" />
		  <view style="margin-top: 20rpx;">
			<radio-group :value="tempUnit" @change="e => tempUnit = e.detail.value">
			  <label>
				<radio value="mmol/L" :checked="tempUnit === 'mmol/L'" /> mmol/L
			  </label>
			  <label style="margin-left: 40rpx;">
				<radio value="mg/dL" :checked="tempUnit === 'mg/dL'" /> mg/dL
			  </label>
			</radio-group>
		  </view>
		</view>


		<!-- 操作按钮 -->
		<view class="modal-actions">
		  <button @click="cancelEdit">取消</button>
		  <button @click="confirmEdit">确定</button>
		</view>
	  </view>
	</uni-popup>
	
	<!-- 保存按钮 -->
	<view class="save-btn" @click="saveInfo">
	  <text>保存</text>
	</view>
	
   </view>
  </view>
  <custom-tabbar v-if="showCustomTabBar"></custom-tabbar>
</template>

<script>
	//import tabBarMixin from '@/common/mixins/tab-bar-mixin.js';
import { getUserIndicatorInfo,updateUserIndictor,addUserIndicatorInfo } from '@/common/api.js'

export default {
  data() {
    return {
		userIndicator: {},
		showCustomTabBar: true,
		
    popupType: '', // 或 'checkbox'
    popupTitle: '',
    popupPlaceholder: '',
    popupOptions: [], // 多选列表
    checkedItems: [], // 勾选结果
    otherValue: '', // “其他”输入框临时值
    tempInput: '', // 普通输入框临时值
    currentEditField: '', // 正在编辑的字段标识/
      popupVisible: false,
      popupInput: '',
      currentField: '',
	  TimeValue: "请选择时间",

      // 临时字段
      tempMultiSelect: [],
      tempOtherInput: '',
      multiSelectMode: '', // stroke 或 other
      multiSelectVisible: false,
	  tempUnit: 'mmol/L',
	  
    };
  },
  computed: {
	  level(){
		  const bmi = this.userIndicator.bmi;
		  if( bmi <= 18.5 ){
			  return '偏瘦';
		  }else if( bmi > 18.5 && bmi <= 23.9 ){
			  return '正常';
		  }else if( bmi >= 24 && bmi <= 27.9 ){
			  return '偏胖';
		  }else if( bmi >= 28 && bmi <= 35 ){
			  return '1类肥胖';
		  }else if( bmi > 35 && bmi <= 40 ){
			  return '2类肥胖';
		  }
	  }
  },
  onShow() {
    this.loadUserIndicator();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
	async loadUserIndicator() {
		try {
		    const res = await getUserIndicatorInfo();
			console.log('查询到的记录',res)
		    
		    // 判断是否为空（你可以根据实际结构判断）
		    if (res.data === null) {
				//首次填写记录为null则置空
				this.userIndicator = {};
				console.log('首次填写')
		      // 新建记录
		     // const addRes = await addUserIndicatorInfo();
		    } else {
		      this.userIndicator.sbp = res.data.sbp;
			  this.userIndicator.dbp = res.data.dbp;
			  this.userIndicator.bloodSugar = res.data.bloodSugar;
			  this.userIndicator.tc = res.data.tc;
			  this.userIndicator.ldlC = res.data.ldlC;
			  this.userIndicator.hdlC = res.data.hdlC;
			  this.userIndicator.tg = res.data.tg;
			  this.userIndicator.height = res.data.height;
			  this.userIndicator.weight = res.data.weight;
			  this.userIndicator.exerciseDuration = res.data.exerciseDuration;
			  this.userIndicator.smoke = res.data.smoke;
			  this.userIndicator.drink = res.data.drink;
			  this.userIndicator.vegFruit = res.data.vegFruit;
			  this.userIndicator.bmi = res.data.bmi;
		      console.log('已存在健康指标', this.userIndicator);
		    }
		  } catch (err) {
		    console.error('加载健康指标失败', err);
		    uni.showToast({ title: '获取失败', icon: 'none' });
		  }
	    },
	/** 打开弹窗：通用调用方法 */
	  
	  openEditPopup({ type, title, placeholder, value, options, field }) {
		this.popupType = type
		this.popupTitle = title
		this.popupPlaceholder = placeholder || ''
		this.currentEditField = field

		if (type === 'input') {
		  this.tempInput = value || ''
		} else if (type === 'checkbox') {
		  // 将字符串值拆为数组
		  // this.checkedItems = typeof value === 'string' ? value.split('、') : []
		  this.checkedItems = typeof value === 'string' ? value.split('、') : (Array.isArray(value) ? value : []);
		  this.popupOptions = options || []
		  // 自动识别“其他”选项
		  //this.otherValue = this.checkedItems.find(v => !this.popupOptions.includes(v)) || ''
		}

		this.$refs.editPopup.open()
	  },
	/* 血脂四项的弹窗 */
		openEditSelectPopup({ title, placeholder, value, field }) {
		  this.popupType = 'select-input'
		  this.popupTitle = title
		  this.popupPlaceholder = placeholder || ''
		  this.currentEditField = field
		  this.tempInput = value || ''
		  this.tempUnit = 'mmol/L' // 默认单位
		  this.$refs.editPopup.open()
		},
	/** 确定按钮 */
	  confirmEdit() {
		  const field = this.currentEditField;
		  const value = this.tempInput?.trim?.();
		if (this.popupType === 'input') {
		  this.userIndicator[field] = value;
		} else if (this.popupType === 'checkbox') {
/* 		  const final = [...this.checkedItems];
		  if (this.otherValue && !this.popupOptions.includes(this.otherValue)) {
			final.push(this.otherValue)
		  }
		  this.userInfo[field] = final.join('、'); */
		  const final = [...this.checkedItems];
		  this.userIndicator[field] = final.length === 1 ? final[0] : final.join('、');
		  console.log('解析后 checkedItems:', this.checkedItems);
		} else if (this.popupType === 'select-input') {
			let number = parseFloat(value)
			if (isNaN(number)) {
			  uni.showToast({ title: '请输入数值', icon: 'none' })
			  return
			}
			if (this.tempUnit === 'mg/dL') {
			  number = (number / 88.57).toFixed(2) // 保留两位小数
			}
			this.userIndicator[field] = number
		  }
		  //console.log('确认保存字段', field, this.userIndicator[field]);
		this.$refs.editPopup.close()
	  },

	  cancelEdit() {
		this.$refs.editPopup.close()
	  },
	  
	  onCheckboxGroupChange(e) {
	    this.checkedItems = e.detail.value;
	  },
    confirmPopup() {
      this.userIndicator[this.currentField] = this.popupInput;
      this.popupVisible = false;
    },
    cancelPopup() {
      this.popupVisible = false;
    },
	onDateChange: function(e) {
		this.DateValue = e.detail.value;
	},

	onTimeChange: function(e) {
		this.TimeValue = e.detail.value;
	},
	goto: function(e){
		uni.navigateTo('/pages/my/medicationTimes')
	},
    editGender() {
      uni.showActionSheet({
        itemList: ['男', '女'],
        success: res => {
          this.userInfo.sex = res.tapIndex === 2 ? '0' : '1';
        }
      });
    },
    editAge() {
      const currentYear = new Date().getFullYear();
      const years = [];
      for (let i = currentYear; i >= 1900; i--) years.push(i.toString());

      uni.showActionSheet({
        itemList: years,
        success: res => {
          const birthYear = parseInt(years[res.tapIndex]);
          this.userInfo.age = currentYear - birthYear;
        }
      });
    },
    editResidence1() {
      uni.showActionSheet({
        itemList: ['北方', '南方'],
        success: res => {
          this.userInfo.residentNorthSouth = res.tapIndex.toString();
        }
      });
    },
	editResidence2() {
	  uni.showActionSheet({
	    itemList: ['城市', '农村'],
	    success: res => {
	      this.userInfo.residentCityCountry = res.tapIndex.toString();
	    }
	  });
	},
    getOtherValue(list) {
      const other = list.find(i => !this.strokeDiseaseOptions.includes(i) && !this.otherDiseaseOptions.includes(i));
      return other || '';
    },
    toggleOption(option) {
      const index = this.tempMultiSelect.indexOf(option);
      if (index === -1) {
        this.tempMultiSelect.push(option);
      } else {
        this.tempMultiSelect.splice(index, 1);
      }
    },
    confirmMultiSelect() {
      const finalList = this.tempMultiSelect.filter(item => item !== '其他');
      if (this.tempOtherInput) {
        finalList.push(this.tempOtherInput);
      }
      if (this.multiSelectMode === 'stroke') {
        this.userInfo.strokeHistory = finalList;
      } else if (this.multiSelectMode === 'other') {
        this.userInfo.otherDisease = finalList;
      }
      this.multiSelectVisible = false;
    },
	async saveInfo() {
	  try {
		const res = await addUserIndicatorInfo(this.userIndicator);
		console.log('提交的数据',  this.userIndicator);
		if (res.code === 200) {
		  uni.showToast({ title: '保存成功', icon: 'success' });
		  this.loadUserIndicator();//重新加载数据
		  /* setTimeout(() => {
			uni.navigateBack();
		  }, 1500); */
		} else {
		  uni.showToast({ title: '保存失败', icon: 'none' });
		}
	  } catch (err) {
		console.error('提交失败', err);
		uni.showToast({ title: '提交失败', icon: 'none' });
	  }
	}
  }
};
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F7F7FA;
		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.content {
			padding: 30rpx;
			padding-bottom: 120rpx;  //保证底部间隙足够滚动
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin: 30rpx 0;
			}
			
			.note {
				font-size: 28rpx;
				color: #666;
				    padding: 20rpx;          /* 内边距 */
				    margin: 10rpx 0;         /* 外边距 */
				    background-color: #D4F1F9;  /* 背景色 */
				    border-radius: 10rpx;     /* 圆角 */
				    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */
				    border: 1rpx solid #f0f0f0; /* 可选边框 */
				    /* 自动换行 & 高度自适应 */
				    word-wrap: break-word;   /* 允许长单词换行 */
				    overflow-wrap: break-word; /* 更现代的换行方式 */
				    white-space: normal;     /* 允许换行 */
				    display: inline-block;   /* 让宽度适应内容（可选） */
				    width: 100%;             /* 宽度占满父容器 */
				    box-sizing: border-box;  /* padding 不影响宽度计算 */
			}
			
			.reminder {
				font-size: 28rpx;
				color: #666;
				    padding: 20rpx;          /* 内边距 */
				    margin: 10rpx 0;         /* 外边距 */
				    background-color: #FAFAD2;  /* 背景色 */
				    border-radius: 10rpx;     /* 圆角 */
				    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */
				    border: 1rpx solid #f0f0f0; /* 可选边框 */
				    /* 自动换行 & 高度自适应 */
				    word-wrap: break-word;   /* 允许长单词换行 */
				    overflow-wrap: break-word; /* 更现代的换行方式 */
				    white-space: normal;     /* 允许换行 */
				    display: inline-block;   /* 让宽度适应内容（可选） */
				    width: 100%;             /* 宽度占满父容器 */
				    box-sizing: border-box;  /* padding 不影响宽度计算 */
			}
			
			.info-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				
				.label {
					font-size: 32rpx;
					color: #333;
				}
				
				.value {
					display: flex;
					align-items: center;
					
					text {
						font-size: 32rpx;
						color: #666;
						margin-right: 10rpx;
					}
					
					input {
						text-align: right;
						font-size: 32rpx;
						color: #666;
					}
					
					&.avatar {
						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 40rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		
		.save-btn {
				margin-top: 60rpx;
				margin-bottom: 60rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				height: 88rpx;
				background-color: #1890FF;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			
			text {
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
			}
		}
		.custom-modal {
		  background: #fff;
		  padding: 30rpx;
		  border-radius: 20rpx;
		}
		.modal-title {
		  font-size: 34rpx;
		  font-weight: bold;
		  margin-bottom: 20rpx;
		}
		.modal-input {
		  width: 90%;
		  padding: 20rpx;
		  font-size: 28rpx;
		  border: 1px solid #ccc;
		  border-radius: 12rpx;
		}
		.checkbox-list {
		  display: flex;
		  flex-direction: column;
		  gap: 20rpx;
		}
		.checkbox-item {
		  display: flex;
		  align-items: center;
		  gap: 20rpx;
		}
		.other-input {
		  display: flex;
		  align-items: center;
		  gap: 20rpx;
		}
		.other-input input {
		  flex: 1;
		  border: 1px solid #ccc;
		  border-radius: 10rpx;
		  padding: 12rpx;
		}
		.modal-actions {
		  margin-top: 30rpx;
		  display: flex;
		  justify-content: space-between;
		}
		.modal-actions button {
		  flex: 1;
		  margin: 0 20rpx;
		  background-color: #007aff;
		  color: #fff;
		  border: none;
		  border-radius: 12rpx;
		  padding: 5rpx 0;
		}
		.SelectTime {
			display: flex;
			flex-direction: grow;
		}

		.TimeLabel {
			width: 0;
			flex-grow: 3;
			text-align: left;
			padding-left: 24px;
		}

		.TimeText {
			width: 0;
			flex-grow: 7;
		}

		.Time-picker {
			color: #8f8f8f;
		}
		
		.welcome-card {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: linear-gradient(to right, #1890FF, #50C1E9);
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			color: #fff;
			margin-bottom: 15rpx; /* 减少与下方卡片的距离 */
			margin-top: 15rpx; /* 增加与上方导航栏的距离 */
			margin-left: 25rpx;
			margin-right: 28rpx;
			
			.welcome-text {
				display: flex;
				flex-direction: column;
				
				.greeting {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.subtitle {
					font-size: 24rpx;
					opacity: 0.9;
				}
			}
			
			.welcome-image {
				width: 100rpx;
				height: 100rpx;
			}
		}

	}
</style> 
